import { Button, Form, Input, Table, Space, Modal, DatePicker } from 'antd';
import React, { useEffect, useState } from 'react';

//*样式
import "../../../scss/lk/MarketForm.scss"
//*图标
import { SearchOutlined } from "@ant-design/icons"
//*请求
import { marketform_list, marketform_fen, marketform_mohu, marketform_remove, marketform_tianjia } from "../../../tools/api"
import axios from 'axios';

import { message } from "antd";
import Upload from 'antd/es/upload/Upload';



function MarketForm(props) {
    //*定义表单数据
    var [data, setData] = useState([])
    //*定义分页
    const [pagination, setPagination] = useState({ current: 1, pageSize: 5, total: 0 })
    //*定义详情弹框默认样式
    const [isModalOpen, setIsModalOpen] = useState(false);
    //*定义编辑弹框默认样式
    const [isbianji, setIsBianJi] = useState(false);
    //*定义添加弹框状态
    const [istianjia, setIsTianJia] = useState(false)
    //*结构form
    var { useForm } = Form
    var [form] = useForm()
    //*保存id
    var [id, setID] = useState([])

    //*时间
    var [dateString, setDateString] = useState([])
    //*loading
    const [loading, setLoading] = useState(false)

    //*生命周期
    useEffect(() => {
        marketform_list().then((ok) => {
            console.log(ok.data);
            setData(ok.data)
            //*分页
            setPagination({ current: 1, pageSize: 5, total: ok.data.lenght })
        })
    }, [])

    //*获取列表数据
    function list() {
        marketform_list().then((ok) => {
            console.log(ok.data);
            setData(ok.data)
            //*分页
            setPagination({ current: 1, pageSize: 5, total: ok.data.lenght })
        })
    }
    //*定义表头数据
    const columns = [
        {
            title: '提交时间',
            dataIndex: 'time',
            key: 'age',
        },
        {
            title: '单据编号',
            dataIndex: 'bianhao',
            key: 'address',
        },
        {
            title: '客户名称',
            dataIndex: 'kehuname',
            key: 'address',
        },
        {
            title: '实收金额（元）',
            dataIndex: 'money',
            key: 'address',
        },
        {
            title: '门店',
            dataIndex: 'shop',
            key: 'address',
        },
        {
            title: '仓库',
            dataIndex: 'shopwarehouse',
            key: 'address',
        },
        {
            title: '状态',
            dataIndex: 'zhuangtai',
            key: 'address',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <span onClick={() => { bianji(record) }} >编辑</span>
                    <span onClick={() => { remove(record) }} >删除</span>
                    <span onClick={() => { particulars(record) }}>详情</span>
                </Space>
            ),
        },
    ];
    //*分页时触发的事件
    var onchenge = (pagination) => {
        setPagination(pagination)
        setLoading(true)
        setTimeout(() => {
            marketform_fen(pagination).then((ok) => {
                console.log(ok.data);
                setLoading(false)
                setData(ok.data)

            })
        }, 500);
    }
    //*搜索
    var onSousuo = (value) => {
        console.log(value);
        marketform_mohu(value).then((ok) => {
            console.log(ok.data);
            setData(ok.data)

        })
    }
    //*删除
    var remove = (record) => {
        marketform_remove(record.id).then((ok) => {
            console.log(ok.data);
            message.open({ type: 'success', content: '删除成功' });
            list()
        })
        // console.log(record);
    }

    //*弹框隐藏
    const handleone = () => {
        setIsModalOpen(false);
    };
    const handletwo = () => {
        setIsBianJi(false)
    };
    const handlethree = () => {
        setIsTianJia(false)
    };

    //*详情显示
    var particulars = (react) => {
        console.log(react);
        setIsModalOpen(true)
        form.setFieldsValue(react)
    }
    //*编辑显示
    var bianji = (react) => {
        console.log(react);
        setID(react.id)
        setIsBianJi(true)
        form.setFieldsValue(react)
    }
    //*确认编辑
    var onbianji = (value) => {
        axios.patch(`http://localhost:4000/marketform/${id}`, {
            time: value.time,
            bianhao: value.bianhao,
            kehuname: value.kehuname,
            money: value.money,
            shop: value.shop,
            shopwarehouse: value.shopwarehouse,
            zhuangtai: value.zhuangtai
        }).then((ok) => {
            console.log(ok.data);
            message.open({ type: 'success', content: '编辑完成' });
            list()
            setIsBianJi(false)
        })


    }
    //*添加显示
    var tianjia = () => {
        setIsTianJia(true)
    }
    //*添加数据
    var ontijiao = (value) => {
        value.time = dateString
        marketform_tianjia(value).then((ok) => {
            message.open({ type: 'success', content: '新增成功' });
            list()

        })
    }
    //*日期
    const onChange = (value, dateString) => {
        console.log('Formatted Selected Time: ', dateString);
        setDateString(dateString)
    };
    return (
        <div className='marketform'>
            <div className="top_name">
                销售/销售单
            </div>
            <div className="center_box">
                <div className="box_top">
                    <Button type="primary" onClick={tianjia}>新增</Button>
                    {/* <Button>导入</Button> */}
                    <Upload accept='.xls,.xlsx' action='http://localhost:4000/marketform' name="marketform" showUploadList={false}>
                        <Button>导入</Button>
                    </Upload>
                    <Button  href='http://localhost:4000/marketform'>导出</Button>
                </div>
                <div className="box_input">
                    <Form
                        onFinish={onSousuo}
                        className="search"
                    >
                        <Form.Item className="formItem" name='kehuname'>
                            <Input placeholder="客户名称" />
                        </Form.Item>
                        <Form.Item className="formItem" >
                            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>搜索</Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className="box_center">
                    <Table columns={columns} dataSource={data} onChange={onchenge} pagination={pagination} loading={loading} />
                </div>
                <Modal title="查看详情" open={isModalOpen}
                    footer={[
                        <Button key="button1" onClick={handleone}>取消 </Button>,
                    ]}
                >
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        form={form}
                    >
                        <Form.Item
                            label="提交时间"
                            name="time"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input disabled={true} />
                        </Form.Item>
                        <Form.Item
                            label="数据编号"
                            name="bianhao"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input disabled={true} />
                        </Form.Item>
                        <Form.Item
                            label="客户名称"
                            name="kehuname"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input disabled={true} />
                        </Form.Item>
                        <Form.Item
                            label="实收金额（元）"
                            name="money"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input disabled={true} />
                        </Form.Item>
                        <Form.Item
                            label="门店"
                            name="shop"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input disabled={true} />
                        </Form.Item>
                        <Form.Item
                            label="仓库"
                            name="shopwarehouse"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input disabled={true} />
                        </Form.Item>
                        <Form.Item
                            label="状态"
                            name="zhuangtai"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input disabled={true} />
                        </Form.Item>

                    </Form>
                </Modal>
                <Modal title="编辑信息" open={isbianji}
                    footer={[]}
                >
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        form={form}
                        onFinish={onbianji}
                    >
                        <Form.Item
                            label="提交时间"
                            name="time"
                            rules={[
                                {
                                    required: true,
                                    message: '提交时间不能为空'

                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="数据编号"
                            name="bianhao"
                            rules={[
                                {
                                    required: true,
                                    message: '数据编号不能为空'

                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="客户名称"
                            name="kehuname"
                            rules={[
                                {
                                    required: true,
                                    message: '客户名称不能为空'
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="实收金额（元）"
                            name="money"
                            rules={[
                                {
                                    required: true,
                                    message: '金额不能为空'
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="门店"
                            name="shop"
                            rules={[
                                {
                                    required: true,
                                    message: '门店不能为空'
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="仓库"
                            name="shopwarehouse"
                            rules={[
                                {
                                    required: true,
                                    message: '仓库不能为空'
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="状态"
                            name="zhuangtai"
                            rules={[
                                {
                                    required: true,
                                    message: '状态不能为空'
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                            <Button key="button1" onClick={handletwo}>取消 </Button>
                        </Form.Item>
                    </Form>
                </Modal>
                <Modal title="添加信息" open={istianjia}
                    footer={[]}
                >
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}

                        onFinish={ontijiao}
                    >

                        <Form.Item
                            label="提交时间"
                            name="time"
                        >
                            <Space direction="vertical">
                                <DatePicker onChange={onChange} placeholder='请输入创建时间' />
                            </Space>
                        </Form.Item>
                        <Form.Item
                            label="数据编号"
                            name="bianhao"
                            rules={[
                                {
                                    required: true,
                                    message: '数据编号不能为空'
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="客户名称"
                            name="kehuname"
                            rules={[
                                {
                                    required: true,
                                    message: '客户名称不能为空'
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="实收金额（元）"
                            name="money"
                            rules={[
                                {
                                    required: true,
                                    message: '金额不能为空'
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="门店"
                            name="shop"
                            rules={[
                                {
                                    required: true,
                                    message: '门店不能为空'
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="仓库"
                            name="shopwarehouse"
                            rules={[
                                {
                                    required: true,
                                    message: '仓库不能为空'
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="状态"
                            name="zhuangtai"
                            rules={[
                                {
                                    required: true,
                                    message: '状态不能为空'
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                添加信息
                            </Button>
                            <Button key="button1" onClick={handlethree}>取消 </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>

        </div >
    );
}

export default MarketForm;